<template>
    <div class="container mt20" v-loading="loading">
        <div id="main"></div>
        <div class="buttons">
            <el-radio-group @change="radioChange" v-model="radioValue" size="default">
                <el-radio-button label="最近30天" :value="30" />
                <el-radio-button label="最近半年" :value="6" />
                <el-radio-button label="本年" :value="year" />
            </el-radio-group>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';
import { CountParams } from '@/apis/counts/type';
import { getQuestionsCount, getRepairsCount } from '@/apis/counts/counts';
import { sortByDate } from '@/utils/arrUtils';

let myChart: echarts.ECharts | null = null;
const loading = ref(false)
const year = ref(new Date().getFullYear());

const radioValue = ref(30);

const radioChange = (val: number) => {
    switch (val) {
        case 30:
            params.value = { days: 30 };
            break;
        case 6:
            params.value = { months: 6 };
            break;
        case year.value:
            params.value = { years: year.value };
            break;
        default:
            break;
    }
    getEchartsData();

}

const initEcharts = () => {
    myChart = echarts.init(document.getElementById('main'));

    // 监听窗口大小变化，自动调整图表尺寸
    window.addEventListener('resize', () => {
        myChart?.resize();
    });
}

const setEchartOption = (xData: string[], repairData: number[], questionData: number[]) => {

    const option = {
        grid: {
            left: '3%',
            right: '3%'
        },
        title: {
            text: '报修投诉统计',
            top: 'left',
            left: '1%',
        },
        tooltip: {
            // 显示提示框，方便查看多条线的数据
            trigger: 'axis'
        },
        legend: {
            // 添加图例区分不同线条
            data: ['报修数据', '投诉数据'],
            top: 30
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '报修数据', // 线条名称（对应图例）
                data: repairData,
                type: 'line',
                lineStyle: { color: '#5470C6' } // 自定义线条颜色
            },
            {
                name: '投诉数据',
                data: questionData,
                type: 'line',
                lineStyle: { color: '#91CC75' }
            }
        ]
    };
    myChart?.setOption(option);

}
//获取数据

const params = ref<CountParams>({
    days: 30
})
const getEchartsData = async () => {

    loading.value = true;
    // 获取数据
    //请求报修数据
    const repairRes = await getRepairsCount(params.value);
    //请求投诉数据
    const questionRes = await getQuestionsCount(params.value);

    loading.value = false

    let repairResData = sortByDate(repairRes.data);
    let questionResData = sortByDate(questionRes.data);

    let xData = repairResData.map(item => item.label);
    let repairData: number[] = repairResData.map(item => item.counts);
    let questionData: number[] = questionResData.map(item => item.counts);


    setEchartOption(xData, repairData, questionData);

    // 创建数据对象
}


onMounted(() => {
    initEcharts();
    getEchartsData();

})
onBeforeUnmount(() => {
    myChart?.dispose(); //销毁echarts
})
</script>

<style scoped lang='less'>
.container {
    width: 100%;
    height: 400px;
    position: relative;
    .buttons {

        position: absolute;
        right: 0;
        top: 0;
    }

    #main {
        width: 100%;
        height: 100%;
    }

}
</style>